<template>
<div id="Statistics">
  <van-tabs v-model="active" style="flex-shrink: 0;" inverse title-active-color="#18a3dc" indicator-color="#18a3dc" color="#18a3dc" text-color="#666666" center>
    <van-tab title="我的数据"></van-tab>
    <!-- <van-tab title="租借统计"></van-tab> -->
    <van-tab title="每日总账单"></van-tab>
  </van-tabs>
  <div class="flex-body">
    <component :is="nameArr[active]" style="width: 100%; overflow: hidden; flex: 1;" @turnTo="turnTo"></component>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
import MyData from './MyData.vue';
import AllData from './AllData.vue';
import DayBill from './DayBill.vue';

@Component({ components: { MyData, AllData, DayBill } })
export default class Statistics extends Vue {

  active: any = 0
  //  'all-data',
  nameArr: any = [ 'my-data', 'day-bill' ]

  turnTo() {

  }

  mounted() {
    if(this.$store.state.userInfo.roleType == 3) this.nameArr = [ 'my-data', 'day-bill' ];
  }
  
};
</script>

<style lang="scss">
#Statistics {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

